<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.global.js"></script>
</head>
<body>
    <div id ="app">
        <div>
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>

        </div>
        <ul>
        <li v-for="(user,index) in userList" :key="user.id">
                    <input type="checkbox" />
                    姓名：{{user.name}}
                </li>
        </ul>
    </div>
    <script>
        const vm ={
            data:function(){
                return{
                    userList:[
                        {id:1,name:'zc'},
                        {id:2,name:'ls'},

                    ],
                    name:'',
                    nextId: 3
                }
            },
            methods:{
                addNewUser(){
                    this.userList.unshift({id:this.nextId,name:this.name})
                    this.naem=''
                    this.nextId++
                }
            },
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
</html>